import React, { useState, useEffect, useContext } from 'react';
import { Layout, Button, Spin, message, Modal } from 'antd';
import { BookOutlined, ToolOutlined } from '@ant-design/icons';
import axios from 'axios';
import { API_BASE_URL } from '../config';
import ProductFeature from './ProductFeature';
import ProductParameter from './ProductParameter';
import { TabsContext } from '../contexts/TabsContext';

// 产品详情的CSS样式
const customStyles = `
  .product-detail-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
    overflow: auto;
  }
  
  .product-detail-header {
    padding: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
  }
  
  .product-detail-tabs {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #e8e8e8;
  }
  
  .product-detail-tab {
    padding: 16px 0;
    margin-right: 24px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
  }
  
  .product-detail-tab.active {
    color: #1766a3;
    font-weight: bold;
  }
  
  .product-detail-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #1766a3;
  }
  
  .product-detail-content {
    padding: 24px;
    background: #fff;
    margin: 16px;
    flex: 1;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    overflow: auto;
  }
  
  .product-detail-item {
    display: flex;
    margin-bottom: 16px;
  }
  
  .product-detail-label {
    color: #666;
    text-align: right;
    padding-right: 16px;
    font-weight: 500;
    flex: 0 0 120px;
  }
  
  .product-detail-value {
    color: #333;
    flex: 1;
  }
  
  .product-detail-actions {
    display: flex;
    justify-content: flex-end;
    margin: 16px;
  }
  
  /* 响应式样式 */
  @media (max-width: 576px) {
    .product-detail-content {
      padding: 16px;
      margin: 8px;
    }
    
    .product-detail-label {
      flex: 0 0 100px;
    }
    
    .product-detail-tab {
      padding: 12px 0;
      margin-right: 16px;
    }
  }
`;

const { Content } = Layout;

// 产品详情组件
const ProductDetail = ({ productId }) => {
  // 使用TabsContext上下文
  const { addTab } = useContext(TabsContext);
  
  // 状态管理
  const [loading, setLoading] = useState(false);
  const [productDetail, setProductDetail] = useState(null);
  const [activeTab, setActiveTab] = useState('detail');
  const [isMobile, setIsMobile] = useState(false);
  
  // 添加Modal相关状态
  const [bomModalVisible, setBomModalVisible] = useState(false);
  const [bomModalType, setBomModalType] = useState('open'); // 'open' 或 'create'
  const [existingBom, setExistingBom] = useState(null);
  const [bomModalTitle, setBomModalTitle] = useState('');
  const [bomModalContent, setBomModalContent] = useState('');

  // 添加工艺相关Modal状态
  const [processModalVisible, setProcessModalVisible] = useState(false);
  const [processModalType, setProcessModalType] = useState('open'); // 'open' 或 'create'
  const [existingProcess, setExistingProcess] = useState(null);
  const [processModalTitle, setProcessModalTitle] = useState('');
  const [processModalContent, setProcessModalContent] = useState('');
  const [bomDataForProcess, setBomDataForProcess] = useState(null);

  // 检测是否为移动设备
  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth <= 576);
    };
    
    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);
    
    return () => {
      window.removeEventListener('resize', checkIsMobile);
    };
  }, []);

  // 获取产品详情
  useEffect(() => {
    const fetchProductDetail = async () => {
      if (!productId) return;
      
      setLoading(true);
      try {
        const response = await axios.get(`${API_BASE_URL}/api/product_info/${productId}`);
        
        if (response.data && response.data.code === 200) {
          console.log('产品详情数据:', response.data.data);
          setProductDetail(response.data.data);
        } else {
          message.error('获取产品详情失败: ' + (response.data.message || '未知错误'));
        }
      } catch (error) {
        console.error('获取产品详情错误:', error);
        message.error('获取产品详情失败: ' + (error.message || '网络错误'));
      } finally {
        setLoading(false);
      }
    };

    fetchProductDetail();
  }, [productId]);

  // 处理选项卡切换
  const handleTabChange = (tab) => {
    setActiveTab(tab);
  };
  
  // 检查产品是否有对应的BOM
  const checkProductBOM = async () => {
    try {
      setLoading(true);
      
      // 通过GET /api/product_info/{product_id}获取产品详情，包含BOM_ID
      const response = await axios.get(`${API_BASE_URL}/api/product_info/${productId}`);
      
      if (response.data && response.data.code === 200) {
        const productData = response.data.data;
        console.log('获取产品详情成功，包含BOM信息:', productData);
        
        if (productData.bom_id) {
          // 产品有关联的BOM ID
          console.log('产品关联的BOM ID:', productData.bom_id);
          
          // 获取BOM详情
          const bomResponse = await axios.get(`${API_BASE_URL}/api/product_bom/${productData.bom_id}`);
          
          if (bomResponse.data && bomResponse.data.code === 200) {
            const bomData = bomResponse.data.data;
            console.log('获取到BOM详情:', bomData);
            
            // 设置现有BOM
            setExistingBom(bomData);
            
            // 显示确认打开BOM的模态框
            setBomModalType('open');
            setBomModalTitle('打开产品BOM');
            setBomModalContent(`产品 ${productDetail.name} (${productDetail.code}) 已有BOM: ${bomData.code || bomData.id}，是否打开?`);
            setBomModalVisible(true);
          } else {
            console.error('获取BOM详情失败:', bomResponse.data);
            message.error('获取BOM详情失败: ' + (bomResponse.data?.message || '未知错误'));
          }
        } else {
          // 产品没有关联的BOM，显示创建BOM的模态框
          console.log('产品没有关联的BOM ID，准备创建');
          setBomModalType('create');
          setBomModalTitle('创建产品BOM');
          setBomModalContent(`产品 ${productDetail.name} (${productDetail.code}) 没有对应的BOM，是否创建新的BOM? 新BOM编码将为: BOM-${productDetail.code}`);
          setBomModalVisible(true);
        }
      } else {
        message.error('获取产品详情失败: ' + (response.data?.message || '未知错误'));
      }
    } catch (error) {
      console.error('检查产品BOM错误:', error);
      message.error('检查产品BOM失败: ' + (error.message || '未知错误'));
    } finally {
      setLoading(false);
    }
  };
  
  // 处理打开产品工艺
  const handleOpenProcess = () => {
    if (!productId || !productDetail) {
      console.error('产品ID或产品详情不存在', { productId, productDetail });
      message.error('产品信息不完整，无法操作');
      return;
    }
    
    console.log('点击产品工艺按钮，产品ID:', productId, '产品信息:', productDetail);
    message.loading('正在处理产品工艺数据...', 1);
    
    // 实现产品工艺流程的复杂逻辑
    handleOpenProductProcess();
  };

  // 处理打开产品工艺的流程
  const handleOpenProductProcess = async () => {
    if (!productId || !productDetail) return;
    
    setLoading(true);
    try {
      console.log('开始检查产品工艺数据');
      
      // 步骤1: 检查当前产品是否已有对应的工艺数据
      console.log('API请求:', `${API_BASE_URL}/api/product_process_route`, { product_id: productId });
      const processResponse = await axios.get(`${API_BASE_URL}/api/product_process_route`, {
        params: {
          product_id: productId
        }
      });
      
      console.log('产品工艺检查响应:', processResponse.data);
      
      if (processResponse.data && processResponse.data.code === 200) {
        const processList = processResponse.data.data.items || [];
        console.log('获取到工艺列表:', processList);
        const hasProcess = processList.length > 0;
        
        if (hasProcess) {
          // 若有工艺数据，弹窗提示用户
          const processData = processList[0];
          console.log('找到现有工艺数据:', processData);
          
          // 设置Modal状态，显示确认弹窗
          setExistingProcess(processData);
          setProcessModalType('open');
          setProcessModalTitle('打开产品工艺');
          setProcessModalContent(`当前产品"${productDetail.name}"已有对应的工艺数据"${processData.name || processData.code}"，是否打开？`);
          setProcessModalVisible(true);
          console.log('已设置工艺确认弹窗为可见状态');
        } else {
          console.log('未找到现有工艺数据，进入判断流程');
          
          // 若无工艺数据，进入复杂判断流程
          // 步骤2: 判断产品是否是发布状态
          const productStatusCode = getStatusCode(productDetail.status);
          console.log('产品状态代码:', productStatusCode);
          
          if (productStatusCode !== 'active') {
            console.log('产品未处于发布或工作中状态，当前状态:', productDetail.status);
            
            // 设置产品状态提示模态框
            setBomModalType('product_status_warning');
            setBomModalTitle('产品状态提示');
            setBomModalContent(`产品 ${productDetail.name} (${productDetail.code}) 必须处于"发布"或"工作中"状态才能进行工艺操作，请先更新产品状态。`);
            setBomModalVisible(true);
            return;
          }
          
          console.log('产品状态检查通过，开始检查BOM数据');
          
          // 步骤3: 判断产品是否有BOM数据，使用/api/product_info/{product_id}接口获取BOM ID
          try {
            // 直接通过GET /api/product_info/{product_id}获取产品详情，包含BOM_ID
            const productInfoResponse = await axios.get(`${API_BASE_URL}/api/product_info/${productId}`);
            
            console.log('产品详情响应:', productInfoResponse.data);
            
            if (productInfoResponse.data && productInfoResponse.data.code === 200) {
              const productData = productInfoResponse.data.data;
              
              // 检查产品是否有关联的BOM ID
              if (!productData.bom_id) {
                console.log('产品没有关联的BOM ID');
                
                // 显示BOM创建提示模态框
                setBomModalType('create');
                setBomModalTitle('需要创建产品BOM');
                setBomModalContent(`产品 ${productDetail.name} (${productDetail.code}) 没有对应的BOM，需要先创建BOM才能进行工艺操作。是否现在创建BOM?`);
                setBomModalVisible(true);
                return;
              }
              
              console.log('找到关联的BOM ID:', productData.bom_id);
              
              // 获取BOM详情
              const bomResponse = await axios.get(`${API_BASE_URL}/api/product_bom/${productData.bom_id}`);
              
              if (bomResponse.data && bomResponse.data.code === 200) {
                const bomData = bomResponse.data.data;
                console.log('BOM详情:', bomData);
                
                console.log('BOM状态:', bomData.status);
                
                const bomStatusCode = getStatusCode(bomData.status);
                console.log('BOM状态代码:', bomStatusCode);
                
                if (bomStatusCode !== 'active') {
                  console.log('BOM未处于发布状态，当前状态:', bomData.status);
                  
                  // 设置BOM状态提示模态框
                  setBomModalType('status_warning');
                  setBomModalTitle('BOM状态提示');
                  setBomModalContent(`产品 ${productDetail.name} (${productDetail.code}) 的BOM必须处于"发布"状态才能进行工艺操作，请先更新BOM状态。`);
                  setExistingBom(bomData); // 存储BOM数据以便导航使用
                  setBomModalVisible(true);
                  return;
                }
                
                console.log('BOM状态检查通过，弹出选择窗口');
                
                // 步骤5: 弹出窗口，让用户选择创建工艺的方式
                setBomDataForProcess(bomData);
                setProcessModalType('create');
                setProcessModalTitle('创建产品工艺');
                setProcessModalContent('请选择创建工艺的方式');
                setProcessModalVisible(true);
                console.log('已设置工艺创建弹窗为可见状态');
              } else {
                console.error('获取BOM详情失败:', bomResponse.data);
                message.error('获取BOM详情失败: ' + (bomResponse.data.message || '未知错误'));
              }
            } else {
              console.error('获取产品详情失败:', productInfoResponse.data);
              message.error('获取产品详情失败: ' + (productInfoResponse.data.message || '未知错误'));
            }
          } catch (bomError) {
            console.error('获取BOM数据异常:', bomError);
            message.error('检查产品BOM失败: ' + (bomError.message || '网络错误'));
          }
        }
      } else {
        console.error('获取工艺数据失败:', processResponse.data);
        message.error('检查产品工艺失败: ' + (processResponse.data.message || '未知错误'));
      }
    } catch (error) {
      console.error('检查产品工艺错误:', error);
      message.error('检查产品工艺失败: ' + (error.message || '网络错误'));
    } finally {
      setLoading(false);
    }
  };
  
  // 手动创建产品工艺
  const createProcessManually = async (productId, bomId) => {
    try {
      setLoading(true);
      
      // 调用接口为产品创建工艺数据
      const createResponse = await axios.post(`${API_BASE_URL}/api/product_process_route`, {
        product_id: productId,
        name: `${productDetail.name}工艺流程`,
        sequence: 1,
        work_hour: 0,
        description: `${productDetail.name}(${productDetail.code})的工艺流程`
      });
      
      if (createResponse.data && createResponse.data.code === 201) {
        const newProcessId = createResponse.data.data.id;
        message.success('产品工艺创建成功');
        
        // 跳转到工艺详情页面
        const tabKey = `productProcessDetail-${newProcessId}`;
        const tabTitle = `${productDetail.code} 工艺`;
        addTab(tabKey, tabTitle, 'ProcessDetail', { routeId: newProcessId });
      } else {
        message.error('创建产品工艺失败: ' + (createResponse.data.message || '未知错误'));
      }
    } catch (error) {
      console.error('创建产品工艺错误:', error);
      message.error('创建产品工艺失败: ' + (error.message || '网络错误'));
    } finally {
      setLoading(false);
    }
  };
  
  // 打开智能推荐页面
  const openIntelligentRecommendation = (productId, bomId) => {
    // 创建智能推荐页签
    const tabKey = `intelligentRecommendation-${productId}`;
    const tabTitle = `${productDetail.code} 智能推荐`;
    addTab(tabKey, tabTitle, 'IntelligentRecommendation', { 
      productId, 
      bomId,
      productCode: productDetail.code,
      productName: productDetail.name 
    });
  };

  // 处理工艺Modal确认
  const handleProcessModalOk = () => {
    console.log('用户确认工艺Modal:', processModalType);
    
    if (processModalType === 'open' && existingProcess) {
      // 打开现有工艺
      const tabKey = `productProcessDetail-${existingProcess.id}`;
      const tabTitle = `${existingProcess.code || productDetail.code} 工艺`;
      console.log('打开工艺详情页签:', tabKey, tabTitle);
      addTab(tabKey, tabTitle, 'ProcessDetail', { routeId: existingProcess.id });
    } else if (processModalType === 'create' && bomDataForProcess) {
      // 手动创建工艺
      console.log('用户选择手动创建');
      createProcessManually(productId, bomDataForProcess.id);
    }
    
    setProcessModalVisible(false);
  };
  
  // 处理工艺Modal取消
  const handleProcessModalCancel = () => {
    console.log('用户取消工艺Modal:', processModalType);
    
    if (processModalType === 'create' && bomDataForProcess) {
      // 如果是创建工艺的弹窗，取消表示选择智能推荐
      console.log('用户选择智能推荐');
      openIntelligentRecommendation(productId, bomDataForProcess.id);
    }
    
    setProcessModalVisible(false);
  };

  // 判断是否为成品或零部件
  const isFinishedOrComponent = () => {
    if (!productDetail || !productDetail.product_type) return false;
    
    const productType = productDetail.product_type;
    return productType === '成品' || productType === '零部件';
  };

  // 格式化日期
  const formatDate = (dateString) => {
    if (!dateString) return '-';
    try {
      const date = new Date(dateString);
      if (!isNaN(date.getTime())) {
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        }).replace(/\//g, '-');
      }
      return dateString;
    } catch (error) {
      console.error('日期格式化错误:', error);
      return dateString || '-';
    }
  };

  // 状态映射 - 中文到英文
  const getStatusCode = (statusText) => {
    // 将中文状态映射到英文代码
    const statusMap = {
      '生效': 'active',
      '发布': 'active',    // '发布'状态映射到active
      '工作中': 'active',  // '工作中'状态也映射到active
      '未生效': 'inactive',
      '未发布': 'inactive',
      '停用': 'inactive',  // '停用'状态映射到inactive
      '草稿': 'draft',
      '归档': 'archived'
    };
    return statusMap[statusText] || statusText || '';
  };

  // 状态映射 - 英文到中文
  const getStatusText = (status) => {
    const statusMap = {
      'active': '发布',     // 根据设计文档，将'active'显示为'发布'
      'inactive': '停用',   // 根据设计文档，将'inactive'显示为'停用'
      'draft': '草稿',
      'archived': '归档',
      'in_progress': '工作中' // 添加'工作中'状态映射
    };
    return statusMap[status] || status || '-';
  };

  // 渲染产品详情内容
  const renderProductDetail = () => {
    if (!productDetail) {
      return (
        <div style={{ textAlign: 'center', padding: '30px 0' }}>
          {loading ? '正在加载...' : '暂无数据'}
        </div>
      );
    }
    
    return (
      <div>
        <div className="product-detail-item">
          <div className="product-detail-label">编码:</div>
          <div className="product-detail-value">{productDetail.code || '-'}</div>
        </div>
        
        <div className="product-detail-item">
          <div className="product-detail-label">名称:</div>
          <div className="product-detail-value">{productDetail.name || '-'}</div>
        </div>
        
        <div className="product-detail-item">
          <div className="product-detail-label">当前版本:</div>
          <div className="product-detail-value">{productDetail.current_version || '-'}</div>
        </div>
        
        <div className="product-detail-item">
          <div className="product-detail-label">状态:</div>
          <div className="product-detail-value">{getStatusText(productDetail.status)}</div>
        </div>
        
        <div className="product-detail-item">
          <div className="product-detail-label">产品类型:</div>
          <div className="product-detail-value">{productDetail.product_type || '-'}</div>
        </div>
        
        <div className="product-detail-item">
          <div className="product-detail-label">描述:</div>
          <div className="product-detail-value">{productDetail.description || '-'}</div>
        </div>
        
        <div className="product-detail-item">
          <div className="product-detail-label">创建时间:</div>
          <div className="product-detail-value">{formatDate(productDetail.create_time)}</div>
        </div>
        
        <div className="product-detail-item">
          <div className="product-detail-label">更新时间:</div>
          <div className="product-detail-value">{formatDate(productDetail.update_time)}</div>
        </div>
      </div>
    );
  };

  // 处理关闭BOM模态框
  const handleBomModalCancel = () => {
    setBomModalVisible(false);
  };
  
  // 处理确认BOM模态框
  const handleBomModalOk = async () => {
    try {
      if (bomModalType === 'open' && existingBom) {
        // 打开现有BOM详情
        console.log('确认打开现有BOM:', existingBom.id);
        const tabKey = `bomDetail-${existingBom.id}`;
        const tabTitle = `${existingBom.code}`;
        addTab(tabKey, tabTitle, 'BOMDetail', { bomId: existingBom.id, code: existingBom.code });
        setBomModalVisible(false);
      } else if (bomModalType === 'status_warning' && existingBom) {
        // 打开BOM详情页面进行状态修改
        console.log('前往BOM页面:', existingBom.id);
        const tabKey = `bomDetail-${existingBom.id}`;
        const tabTitle = existingBom.code || `BOM-${productDetail.code}`;
        addTab(tabKey, tabTitle, 'BOMDetail', { bomId: existingBom.id, code: existingBom.code });
        setBomModalVisible(false);
      } else if (bomModalType === 'product_status_warning') {
        // 关闭产品状态提示模态框
        setBomModalVisible(false);
      } else if (bomModalType === 'create') {
        // 创建新的BOM
        console.log('开始创建产品BOM');
        
        try {
          // 获取产品版本ID
          const versionId = await getProductVersionId(productId, productDetail.current_version);
          
          if (versionId === null) {
            Modal.error({
              title: '无法创建BOM',
              content: '未能找到产品版本信息，请确保产品已创建版本。',
              okText: '确定'
            });
            return;
          }
          
          // 确保正确的BOM编码格式: "BOM" + 产品编码
          // 例如产品编码为PT020，则BOM编码为BOM-PT020
          const bomCode = `BOM-${productDetail.code}`;
          
          console.log('创建BOM，编码:', bomCode, '产品ID:', productId, '版本ID:', versionId);
          
          // 根据API文档创建请求体
          const requestBody = {
            product_id: productId,
            code: bomCode,
            name: `${productDetail.name}的BOM`,
            status: "草稿",
            version_id: versionId
          };
          
          console.log('创建BOM请求体:', requestBody);
          
          // 创建新的产品BOM
          const createResponse = await axios.post(`${API_BASE_URL}/api/product_bom`, requestBody);
          
          console.log('创建产品BOM响应:', createResponse.data);
          
          if (createResponse.data && (createResponse.data.code === 200 || createResponse.data.code === 201)) {
            message.success('产品BOM创建成功');
            
            // 获取创建的BOM ID
            const newBomId = createResponse.data.data.id;
            console.log('新创建的BOM ID:', newBomId);
            
            // 打开新创建的BOM详情
            const tabKey = `bomDetail-${newBomId}`;
            const tabTitle = bomCode;
            addTab(tabKey, tabTitle, 'BOMDetail', { bomId: newBomId, code: bomCode });
            setBomModalVisible(false);
          } else {
            message.error('创建产品BOM失败: ' + (createResponse.data?.message || '未知错误'));
          }
        } catch (error) {
          // 使用专门的错误处理函数
          handleBomCreateError(error);
        }
      }
    } catch (error) {
      console.error('处理BOM操作错误:', error);
      // 显示更详细的错误信息
      if (error.response) {
        console.error('错误响应数据:', error.response.data);
        message.error(`操作失败: ${error.response.data?.message || error.message || '未知错误'}`);
      } else {
        message.error('操作失败: ' + (error.message || '未知错误'));
      }
    }
  };

  // 处理BOM创建失败的情况
  const handleBomCreateError = (error) => {
    console.error('创建BOM失败:', error);
    
    // 显示详细错误信息
    let errorMessage = '创建BOM失败';
    let errorDetails = '';
    
    if (error.response && error.response.data) {
      if (error.response.status === 422) {
        errorMessage = '创建BOM失败: 请求参数不正确';
        console.error('422错误详情:', error.response.data);
        
        // 尝试解析422错误的具体原因
        if (error.response.data.errors) {
          const errors = error.response.data.errors;
          errorDetails = Object.keys(errors).map(key => {
            return `${key}: ${errors[key].join(', ')}`;
          }).join('\n');
        } else if (error.response.data.message) {
          errorDetails = error.response.data.message;
        }
        
        // 检查是否是编码重复的问题
        if (errorDetails.toLowerCase().includes('code') && 
            (errorDetails.toLowerCase().includes('unique') || 
             errorDetails.toLowerCase().includes('duplicate') || 
             errorDetails.toLowerCase().includes('已存在'))) {
          errorMessage = '创建BOM失败: BOM编码已存在';
          
          // 尝试使用不同的BOM编码格式
          const alternativeBomCode = `BOM-${productDetail.code}-${new Date().getTime().toString().slice(-4)}`;
          
          Modal.confirm({
            title: 'BOM编码已存在',
            content: (
              <div>
                <p>系统中已存在相同编码的BOM，是否使用新的编码重试？</p>
                <p>新编码: {alternativeBomCode}</p>
              </div>
            ),
            okText: '使用新编码',
            cancelText: '取消',
            onOk: async () => {
              try {
                // 获取产品版本ID
                const versionId = await getProductVersionId(productId, productDetail.current_version);
                
                if (versionId === null) {
                  message.error('获取产品版本ID失败，无法创建BOM');
                  return;
                }
                
                // 使用新编码重试创建BOM
                const requestBody = {
                  product_id: productId,
                  code: alternativeBomCode,
                  name: `${productDetail.name}的BOM`,
                  status: "草稿",
                  version_id: versionId
                };
                
                const createResponse = await axios.post(`${API_BASE_URL}/api/product_bom`, requestBody);
                
                if (createResponse.data && (createResponse.data.code === 200 || createResponse.data.code === 201)) {
                  message.success('产品BOM创建成功');
                  
                  // 获取创建的BOM ID
                  const newBomId = createResponse.data.data.id;
                  
                  // 打开新创建的BOM详情
                  const tabKey = `bomDetail-${newBomId}`;
                  const tabTitle = alternativeBomCode;
                  addTab(tabKey, tabTitle, 'BOMDetail', { bomId: newBomId, code: alternativeBomCode });
                  setBomModalVisible(false);
                } else {
                  message.error('创建产品BOM失败: ' + (createResponse.data?.message || '未知错误'));
                }
              } catch (retryError) {
                console.error('重试创建BOM失败:', retryError);
                message.error('重试创建BOM失败: ' + (retryError.message || '未知错误'));
              }
            }
          });
          return;
        }
      } else {
        errorMessage = `创建BOM失败: ${error.response.data.message || '服务器错误'}`;
      }
    } else if (error.message) {
      errorMessage = `创建BOM失败: ${error.message}`;
    }
    
    // 显示错误信息
    Modal.error({
      title: '创建BOM失败',
      content: (
        <div>
          <p>{errorMessage}</p>
          {errorDetails && <pre style={{ maxHeight: '200px', overflow: 'auto' }}>{errorDetails}</pre>}
          <p>请尝试使用不同的BOM编码或联系系统管理员。</p>
        </div>
      ),
      okText: '确定'
    });
  };

  // 处理打开产品BOM按钮点击
  const handleBomButtonClick = () => {
    if (!productId || !productDetail) {
      message.error('产品信息不完整，无法操作');
      return;
    }
    
    console.log('点击产品BOM按钮，产品ID:', productId, '产品信息:', productDetail);
    
    // 检查产品是否有对应的BOM
    checkProductBOM();
  };

  // 获取产品版本ID
  const getProductVersionId = async (productId, currentVersionNumber) => {
    try {
      console.log('开始获取产品版本ID，产品ID:', productId, '当前版本号:', currentVersionNumber);
      
      // 使用循环方式获取所有产品版本数据
      let allVersionItems = [];
      let currentPage = 1;
      const pageSize = 20; // 每页数据量，符合接口规范
      let hasMoreData = true;
      
      while (hasMoreData) {
        try {
          // 获取当前页的产品版本数据
          console.log(`获取产品版本数据，第${currentPage}页，每页${pageSize}条`);
          const versionResponse = await axios.get(`${API_BASE_URL}/api/product_version`, {
            params: {
              page: currentPage,
              size: pageSize
            }
          });
          
          if (versionResponse.data && versionResponse.data.code === 200) {
            const pageItems = versionResponse.data.data.items || [];
            const totalItems = versionResponse.data.data.total || 0;
            
            console.log(`获取第${currentPage}页产品版本数据，本页数量:`, pageItems.length, '总数量:', totalItems);
            
            // 将当前页数据添加到总列表中
            allVersionItems = [...allVersionItems, ...pageItems];
            
            // 判断是否还有更多数据
            if (pageItems.length === 0 || allVersionItems.length >= totalItems) {
              hasMoreData = false;
            } else {
              currentPage++;
            }
          } else {
            console.error(`获取产品版本第${currentPage}页数据失败:`, versionResponse.data);
            hasMoreData = false;
          }
        } catch (pageError) {
          console.error(`获取产品版本第${currentPage}页数据出错:`, pageError);
          hasMoreData = false;
        }
      }
      
      console.log('获取到的产品版本总数量:', allVersionItems.length);
      
      // 找到当前产品的所有版本
      const productVersions = allVersionItems.filter(v => v.product_id === Number(productId));
      console.log('当前产品的所有版本数量:', productVersions.length);
      
      if (productVersions.length > 0 && currentVersionNumber) {
        // 首先尝试通过版本号匹配
        let currentVersion = productVersions.find(v => v.version === currentVersionNumber);
        console.log('通过版本号匹配结果:', currentVersion);
        
        // 如果没有找到匹配的版本，则尝试其他方法
        if (!currentVersion) {
          // 尝试找到标记为当前版本的记录
          currentVersion = productVersions.find(v => v.is_current === true);
          console.log('通过is_current匹配结果:', currentVersion);
          
          // 如果仍然没有找到，则取最新创建的版本作为当前版本
          if (!currentVersion) {
            // 按创建时间排序，最新的在前面
            productVersions.sort((a, b) => {
              const dateA = new Date(a.create_time || 0);
              const dateB = new Date(b.create_time || 0);
              return dateB - dateA;
            });
            currentVersion = productVersions[0];
            console.log('使用最新创建的版本作为当前版本:', currentVersion);
          }
        }
        
        if (currentVersion) {
          console.log('找到当前产品版本ID:', currentVersion.id);
          return currentVersion.id;
        }
      }
      
      console.warn('未找到产品版本ID，将返回null');
      return null;
    } catch (error) {
      console.error('获取产品版本ID出错:', error);
      return null;
    }
  };

  return (
    <div className="product-detail-container">
      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
      
      <div className="product-detail-header">
        <div className="product-detail-tabs">
          <div 
            className={`product-detail-tab ${activeTab === 'detail' ? 'active' : ''}`}
            onClick={() => handleTabChange('detail')}
          >
            产品详情
          </div>
          <div 
            className={`product-detail-tab ${activeTab === 'feature' ? 'active' : ''}`}
            onClick={() => handleTabChange('feature')}
          >
            产品特征
          </div>
          <div 
            className={`product-detail-tab ${activeTab === 'parameter' ? 'active' : ''}`}
            onClick={() => handleTabChange('parameter')}
          >
            产品参数
          </div>
          <div style={{ flex: 1 }}></div>
          
          {isFinishedOrComponent() && (
            <div className="product-detail-actions" style={{ display: 'flex', gap: '8px' }}>
              <Button 
                type="primary" 
                icon={<BookOutlined />}
                onClick={handleBomButtonClick}
              >
                产品BOM
              </Button>
              <Button 
                type="primary" 
                icon={<ToolOutlined />}
                onClick={handleOpenProcess}
              >
                产品工艺
              </Button>
            </div>
          )}
        </div>
      </div>
      
      <Spin spinning={loading && activeTab === 'detail'}>
        <div className="product-detail-content">
          {activeTab === 'detail' && renderProductDetail()}
          {activeTab === 'feature' && (
            <ProductFeature productId={productId} />
          )}
          {activeTab === 'parameter' && (
            <ProductParameter productId={productId} />
          )}
        </div>
      </Spin>
      
      {/* 产品BOM弹窗 */}
      <Modal
        title={bomModalTitle}
        open={bomModalVisible}
        onOk={handleBomModalOk}
        onCancel={handleBomModalCancel}
        okText={
          bomModalType === 'create' ? '确认创建' : 
          bomModalType === 'status_warning' ? '前往BOM页面' : 
          '确认'
        }
        cancelText={
          bomModalTitle === '需要创建产品BOM' ? '暂不创建' : 
          bomModalType === 'status_warning' ? '取消' :
          bomModalType === 'product_status_warning' ? '确定' :
          '取消'
        }
      >
        <p>{bomModalContent}</p>
      </Modal>

      {/* 工艺相关的Modal */}
      <Modal
        title={processModalTitle}
        open={processModalVisible}
        onOk={handleProcessModalOk}
        onCancel={handleProcessModalCancel}
        okText={processModalType === 'create' ? '手动创建' : '确认'}
        cancelText={processModalType === 'create' ? '智能推荐' : '取消'}
      >
        <p>{processModalContent}</p>
      </Modal>
    </div>
  );
};

export default ProductDetail; 